<template>
    <van-nav-bar title="商品列表" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <!--第一种方式-->
        <!-- <van-cell v-for="item in productData" :key="item"  >
     <van-card
          num="2"
          price="2.00"
          desc="描述信息"
          title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        />
    
    </van-cell> -->
        <div v-for="item in productData" :key="item">
            <van-card num="2"  :desc="item.name" :title="item.name" :thumb="item.img"
                @click="onClick(item.id)">
                <template #tags>
                    <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
                    &nbsp;<van-tag plain type="primary">{{value}}</van-tag><br>
                   官方指导价：<span style="color:red">{{ item.price }}万</span>  车系概览<van-icon name="arrow" />
                </template>
            </van-card>
          
            <!-- <van-divider /> -->
            <hr style="color:rgb(241, 241, 241)">

        </div>


    </van-list>
</template>
<script  setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ProductApi } from '@/api';
import { useRoute } from 'vue-router';
import router from '@/router';
let route = useRoute()
const productData = ref<any>([]);
const loading = ref(false);
const finished = ref(false);
const value = ref(3.8);
const pageData = reactive({
    pageSize: 5,
    pageNum: 1,
    categoryId: 0
})

onMounted(() => {
    console.log(route.query.categoryId);
    pageData.categoryId = Number(route.query.categoryId)
})
const onLoad = () => {

    callProductApi()
    // 加载状态结束
    // loading.value = false;
    // 异步更新数据
    // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    // setTimeout(() => {
    //     for (let i = 0; i < 10; i++) {
    //         productData.value.push(productData.value.length + 1);
    //     }

    //     // 加载状态结束
    //     loading.value = false;

    //     // 数据全部加载完成
    //     if (productData.value.length >= 40) {
    //         finished.value = true;
    //     }
    // }, 1000);
};

const callProductApi = () => {
    //调用加载状态
    loading.value = true
    ProductApi.select.call({ categoryId: pageData.categoryId, pageNum: pageData.pageNum, pageSize: pageData.pageSize }).then((res: any) => {
        console.log(res);
        // 加载状态结束
        loading.value = false
        if (res.item.length == 0) {
            // 数据全部加载完成
            finished.value = true
        } else {
            productData.value = productData.value.concat(res.item)
            pageData.pageNum = pageData.pageNum + 1
        }

    })


}
//详情跳转
const onClick = (id: any) => {
    router.push({
        name: 'ProductDetail',
        query: { id: id }
    })
}
const onClickLeft = () => history.back();
</script>
<style>
.van-card__header {
    background-color: #fff;
}
</style>